import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
import TableControls from '#cpt/temp/TableControls'
import AddEditModal from '#cpt/temp/AddEditModal'
import Enable from '#cpt/temp/Enable'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Page 		= $Lazy.load(()=>import('#tp/page/page-container'))
const $cache 	= $Lazy.file(()=>import('#private/cache-api'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		// 提交表单列表
		formData : [
			{ label: '事件名称',			name: 'event_name', 		full:true,		required:true },
			{ label: '事件代码',			name: 'event_code', 		full:true,	 	type: 'select',		required:true,	idStr:'code',nameStr:'value' },
			{ label: '绑定等级',			name: 'msg_level_id', 		full:true, 		type: 'select',		required:true, 	idStr:'uuid',nameStr:'level_name' },
			{ label: '绑定消息模板',		name: 'msg_content_id', 	full:true, 		type: 'select',		required:true,	idStr:'uuid',nameStr:'code' },
			{ label: '流程编号',			name: 'process_number', 	full:true, 		type: 'select',		required:true,	idStr:'code',nameStr:'name' },
			{ label: '节点代码',			name: 'node_code', 			full:true, 		type: 'select',		required:true,	idStr:'code' },
			{ label: '排序',			name: 'sort', 				full:true,		type: 'number', },
		]
	}
	
	model = {}
	
	componentDidMount(){
		this.fetch()
	} 
	
	// 获取弹窗下拉框数据
	getModalSelect = async () => {
		const { formData } = this.state
		$fn.setModalRows(formData, ['event_code','msg_level_id','msg_level_id','process_number','node_code'], ()=>{
			$cache.then( async f => {
				// 事件代码
				await $fn.setRow(formData, 'event_code',  await f.getCache({ api: 'conf-msg-event/select'}))
				// 绑定等级
				await $fn.setRow(formData, 'msg_level_id',  await f.getCache({ api: 'conf-msg-level/select'}))
				// 绑定消息模板
				await $fn.setRow(formData, 'msg_content_id',  await f.getCache({ api: 'conf-msg-content/select'}))
				// 流程编号
				await $fn.setRow(formData, 'process_number',  await f.getCache({ api: 'process_name'}))
				// 节点代码
				await $fn.setRow(formData, 'node_code',  await f.getCache({ api: 'node_name'}))
				this.setState({ formData })
			})
		})
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'conf-msg-event/index')
	
	// 表单
	cols = [
		{ title: '事件名称',			dataIndex: 'event_name', 		width:150 },
		{ title: '事件代码', 		dataIndex: 'event_code', 		width:150 },
		{ title: '事件等级', 		dataIndex: 'level_name', 		width:150 },
		{ title: '创建时间', 		dataIndex: 'created_at', 		...$fn.table.time },
		{ title: '更新时间', 		dataIndex: 'updated_at', 		...$fn.table.time },
		{ title: '排序', 			dataIndex: 'sort', 				...$fn.table.num },
		{ title: '状态', 			dataIndex: 'enabled', 			...$fn.table.status, render: text => +text === 1 ? '启用' : '禁用' },
		TableControls.controls.call(this)

	]
	
	// 表格操作按钮
	table_controls = (text,{uuid, enabled}) => {
		return [
			TableControls.edit.call(this, 'conf-msg-event/info', { uuid },{select: this.getModalSelect}), 			// 编辑
			+enabled === 0 && this.onEnabled(1, uuid),							// 启用
			+enabled === 1 && this.onEnabled(0, uuid),							// 禁用
		]
	}
	// 操作按钮
	controls = () => [
		Controls.add.call(this,{click:this.getModalSelect})			// 添加
	]
	// 禁用/启用
	onEnabled = (enabled, uuid) => Enable.call(this, enabled,  { uuid, api:'conf-msg-event/del', param:{ enabled }, isKeys: !uuid })
	render(){
		return (
			<>
				<Page title='事件列表' controls={this.controls()}>
					{/* 表格 */}
					{ Table.call(this) }
				</Page>
				{/* 添加、编辑 */}
				{ AddEditModal.call(this,{ api: 'conf-msg-event/add', editApi:'conf-msg-event/edit' }) }
			</>
		)
	}
}

export default Index